<template>
    <show-modal :title="title" width="800px" @cancel="cancel" :isSure="false">
    <page-wrapper>
        <table-search @search="search(1)" :isExtra="false" @reset="reset()">
            <template slot="form">
                <form-item label="">
                    <a-range-picker
                        style="width: 350px"
                        v-model="times"
                        @change="onDateRangeChange"
                        :show-time="{
                            hideDisabledOptions: true,
                        }"
                        format="YYYY/MM/DD HH:mm:ss"
                        />
                </form-item>
            </template>
        </table-search>
        <table-list
            :loading="loading"
            :columns="columns"
            rowKey="createTime"
            :data="list"
            :pagination="false"
        >
            <template slot="deviceCode">
                {{info.deviceName}}
            </template>
            <template slot="jarCode">
                {{info.jarName}}
            </template>
        </table-list>
        </page-wrapper>
    </show-modal>
</template>
<script>
import table from '@/mixins/table';
import { columns } from './day-columns';
import {remoteDayForChange} from '@/api/monitor'

export default {
    name:'DayForChange',
    mixins: [table],
    props:{
        info:{
            type:Object,
            default:()=>{}
        }
    },
    data(){
        let originForm = {
            fromDate:'',
            toDate:''
        }
        return{
            title:"液位历史数据",
            loading:false,
            columns,
            originForm,
            form:{
                ...originForm
            },
            times:[]
        }
    },
    watch:{
        'form.fromDate':{
            handler(val){
                if(!val){
                    this.times = []
                }
            },
            deep:true
        },
    },
    created(){
        let {deviceCode,jarCode} = this.info;
        this.form.deviceCode = deviceCode;
        this.form.jarCode = jarCode;
        this.search()
    },
    methods:{
        async search(){
            try {
                this.loading = true;
                this.list = []
                let form = this.form;
                if(!form.fromDate){
                    delete form.fromDate;
                    delete form.toDate;
                    this.times = [];
                }
                let res = await remoteDayForChange(this.form);
                this.list = res.data;
            } finally {
                this.loading = false;
            }
        },
        //选择时间范围
        onDateRangeChange(x,e,y){
            this.form.fromDate = e[0];
            this.form.toDate = e[1];
        },
        cancel(){
            this.$emit('cancel')
        }
    }
}
</script>